<template>
    <div v-loading="loading" class="menu">
        <div class="menu-top">
            <p>管理员权限</p>
            <!--            <el-input v-model="title" placeholder="请输入关键词" style="margin-right: 15px;"></el-input>-->
            <!--            <el-button size="small" type="primary" @click="GetSearch()">搜索</el-button>-->
            <!--            <el-button plain size="small" @click="GetResetting()">重置</el-button>-->
        </div>
        <div class="menu-add">
            <el-button icon="el-icon-plus" size="small" type="primary" @click="GetAdd()">添加</el-button>
        </div>
        <div class="menu-center">
            <el-table :data="tableData">
                <el-table-column label="权限设置" prop="title">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.id != 1" size="mini" type="success"
                                   @click="GetCheckGroup(scope.row)">访问权限
                        </el-button>
                        <el-tag v-else type="info">暂无权限设置
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="用户组" prop="title">

                </el-table-column>
                <el-table-column label="描述" prop="description">

                </el-table-column>

                <el-table-column label="状态" prop="status" sortable>
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 1">正常</el-tag>
                        <el-tag v-else type="danger">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="status" sortable width="300">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.id != 1" icon="el-icon-edit" size="mini" type="primary"
                                   @click="GetGroupEdit(scope.row)">修改
                        </el-button>
                        <el-button v-if="scope.row.id != 1" icon="el-icon-delete" size="mini" type="danger"
                                   @click="GetGroupDel(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pages">
                <el-pagination :current-page="currentpage"
                               :page-size="num"
                               :total="total"
                               background
                               layout="prev, pager, next"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
        <el-dialog
            :before-close="handleClose"
            :close-on-click-modal="false"
            :visible.sync="dialogVisibleAdd"
            title="提示"
            width="50%">
            <add ref="add" :dialogVisibleAdd.sync="dialogVisibleAdd" @initPageData="initPageData"></add>
        </el-dialog>
        <el-dialog
            :before-close="handleClose"
            :close-on-click-modal="false"
            :visible.sync="dialogVisibleEdit"
            title="提示"
            width="50%">
            <edit :dialogVisibleEdit.sync="dialogVisibleEdit" :editData="editData" @initPageData="initPageData"></edit>
        </el-dialog>


        <el-dialog :before-close="handleCloseGroup" :visible.sync="dialogVisibleGroup" title="权限设置" width="500px">
            <div class="menulsit">
                <el-tree
                    ref="menu"
                    :data="menulsit"
                    :props="defaultProps"
                    default-expand-all
                    highlight-current
                    node-key="id"
                    show-checkbox>
                </el-tree>
                <el-button size="small" style="margin-top: 20px;" type="primary" @click="Sumbit()">提交
                </el-button>

            </div>
        </el-dialog>


    </div>
</template>

<script>
import add from "@/views/group/add";
import edit from "@/views/group/edit";

export default {
    name: "group",
    components: {add: add, edit: edit},
    data() {
        return {
            title: "",
            tableData: [],
            total: 1,
            page: 1,
            num: 10,
            menuCheckStrictly: true,
            deptCheckStrictly: true,
            currentpage: 1,
            dialogVisibleAdd: false, // 添加
            dialogVisibleEdit: false, // 修改
            dialogVisibleGroup: false, // 权限
            loading: true,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            menulsit: [],
            count: 1,
            chechlist: [],
            groupid: 0,
            editData: {}

        }
    },
    mounted() {
        this.initPageData()
        this.GetParentidMenuList()
        this.loading = false
    },
    methods: {


        //权限删除
        GetGroupDel(item) {
            this.$Msg.openConfirm('确定要删除吗？', 'warning', () => {
                this.loading = true
                this.$http.HttpGet("v1/DeleteGroup?id=" + item.id).then((res) => {
                    if (res.code == 0) {
                        this.$Msg.message(res.msg)
                        setTimeout(() => {
                            this.loading = false
                            // this.$router.go(0)
                            this.initPageData()
                        }, 150)
                    } else {
                        this.$Msg.message(res.msg, 'error')
                        this.loading = false
                    }
                })

            }, () => {
                // Msg.message('退', 'error')
            })
        },
        handleCloseGroup(done) {
            done()
            this.chechlist = [];
        },
        //修改权限
        GetGroupEdit(item) {
            this.editData = item
            this.dialogVisibleEdit = true
        },

        // 菜单权限id
        GetCheckGroup(item) {

            this.groupid = item.id
            let roleMenu = item.rules
            console.log(roleMenu)
            this.$nextTick(() => {
                this.$refs.menu.setCheckedNodes(roleMenu);
            })


            this.dialogVisibleGroup = true

        },

        // 修改菜单权限
        Sumbit() {
            let data = {
                rules: this.getMenuAllCheckedKeys().join(),
                id: this.groupid
            }

            this.$http.HttpPost("v1/GetUpdateGroupMenu", data).then((res) => {
                if (res.code == 0) {
                    this.dialogVisibleGroup = false
                    this.$Msg.message(res.msg)
                    this.initPageData()

                } else {
                    this.$Msg.message(res.msg)
                }
            })
        },

        // 所有菜单节点数据
        getMenuAllCheckedKeys() {
            // 目前被选中的菜单节点
            let checkedKeys = this.$refs.menu.getCheckedKeys();
            // // 半选中的菜单节点
            // let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
            // checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
            return checkedKeys;
        },
        // 获取栏目树节点
        GetParentidMenuList() {
            this.$http.HttpGet("v1/GetParentidMenuList").then((res) => {
                if (res.code == 0) {
                    let data = res.data
                    let parentidArr = data.filter((item) => item.parentid == 0)
                    parentidArr.forEach((item) => {
                        let aa = data.filter((ite) => ite.parentid == item.id)
                        if (aa.length > 0) {
                            this.menulsit.push({
                                id: item.id,
                                label: item.title,
                                children: this.GetChildMenuLsit(aa, data),
                            })
                            // this.Getarr(aa,data)
                        }
                    })
                } else {
                    this.$Msg.message(res.msg, "error");
                }
            })
        },
        GetChildMenuLsit(arr, data = []) {
            var ar = []
            arr.forEach((item) => {
                let a = data.filter((ite) => ite.parentid == item.id)
                ar.push({
                    id: item.id,
                    label: item.title,
                    children: this.GetChildMenuLsit(a, data),
                })
            })

            return ar
        },

        // 搜索
        GetSearch() {
            this.initPageData()
        },

        // 分页
        handleCurrentChange(v) {
            this.page = v
            this.currentpage = v
            this.initPageData()
        },

        // 重置
        GetResetting() {
            this.title = ''

        },
        //初始化数据
        initPageData() {
            let data = {
                page: this.page,
                num: this.num,
            }

            this.$http.HttpPost("v1/GetGrouplist", data).then((res) => {
                this.dialogVisibleAdd = false
                this.dialogVisibleEdit = false
                if (res.code == 0) {
                    this.tableData = res.data
                    this.total = res.count
                } else {
                    this.$Msg.message(res.msg)
                }


            })
        },

        // 添加
        GetAdd() {
            this.dialogVisibleAdd = true
        },
        handleClose1(done) {
            done()
            for (var i = 0; i < this.editField.length; i++) {
                this.editField[i].fielddata = ''
            }
        },
        handleClose(done) {
            done()
            // this.$refs.add.clearForm()

        }
    }
}
</script>

<style scoped>
.menu-top {
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
}

.menu-top p {
    /*width: 100px;*/
    font-size: 16px;
    font-weight: 700;
    color: #666;
    text-align: center;
    margin: 0 10px;
}

.menu-top .el-select {
    margin-right: 10px;
}

.menu-top .el-input {
    width: 300px;
}

.menu-add {
    margin: 15px 0;
}

.menu-center .title {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    cursor: pointer;
}
</style>
